<template>
  <div>
    <el-row :gutter="20">
      <el-col :span="16">
        <el-card>
          <template #header>
            <el-row justify="space-between" align="middle">
              <el-col :span="12">
                <el-page-header content="添加场次" @back="goBack"/>
              </el-col>
              <el-col :span="12" style="text-align: right">
                <el-button v-if="active>0" style="margin-top: 12px" @click="back" type="danger">上一步</el-button>
                <el-button v-if="active<4" style="margin-top: 12px" @click="next" type="primary">下一步</el-button>
                <el-button v-else style="margin-top: 12px;" @click="submit" type="success">提交</el-button>
              </el-col>
            </el-row>
          </template>
          <div>
            <el-steps :active="active" finish-status="success" align-center style="margin-bottom: 30px">
              <el-step title="影片选择"/>
              <el-step title="影厅选择"/>
              <el-step title="时间选择"/>
              <el-step title="详细设置"/>
            </el-steps>
            <div v-if="active===0">
              <el-table
                  :data="movieList"
                  highlight-current-row
                  @current-change="selectMovie"
                  ref="movieRef"
                  style="width: 100%">
                <el-table-column align="center" prop="movieId" label="编号" width="60"></el-table-column>
                <el-table-column align="center" prop="movieName" label="电影名"></el-table-column>
              </el-table>
              <el-pagination
                  :hide-on-single-page="true"
                  v-model:currentPage="pageInfo.pageNum"
                  v-model:page-size="pageInfo.pageSize"
                  :page-sizes="[5, 10, 20, 50]"
                  layout="total, sizes, prev, pager, next, jumper"
                  :total="pageInfo.total"
                  @size-change="handleSizeChange"
                  @current-change="handleCurrentChange"/>
            </div>
            <div v-if="active===1">
              <el-table
                  :data="hallList"
                  highlight-current-row
                  @current-change="selectMovie"
                  style="width: 100%">
                <el-table-column align="center" prop="movieHall.hallId" label="编号" width="60"></el-table-column>
                <el-table-column align="center" prop="movieHall.hallName" label="影厅名"></el-table-column>
              </el-table>
              <el-pagination
                  :hide-on-single-page="true"
                  v-model:currentPage="pageInfo.pageNum"
                  v-model:page-size="pageInfo.pageSize"
                  :page-sizes="[5, 10, 20, 50]"
                  layout="total, sizes, prev, pager, next, jumper"
                  :total="pageInfo.total"
                  @size-change="handleSizeChange"
                  @current-change="handleCurrentChange"/>
            </div>
            <div v-if="active===2">
              <el-date-picker
                  v-model="startTime"
                  type="datetime"
                  placeholder="起始时间"
                  format="YYYY-MM-DD HH:mm:ss"
                  value-format="YYYY-MM-DD HH:mm:ss"
                  @change="setStartTime"
              />
              <el-divider direction="vertical"></el-divider>
              <el-date-picker
                  v-model="endTime"
                  type="datetime"
                  placeholder="结束时间"
                  format="YYYY-MM-DD HH:mm:ss"
                  value-format="YYYY-MM-DD HH:mm:ss"
                  @change="setEndTime"
              />
              <div v-if="startTime">
                <el-result
                    v-if="!isEmpty"
                    icon="error"
                    title="时间冲突">
                </el-result>
                <el-result
                    v-else
                    icon="success"
                    title="影厅空闲">
                </el-result>
              </div>
              <el-timeline v-if="sessionList" style="margin-top: 30px">
                <el-timeline-item
                    v-for="(item,index) in sessionList"
                    :key="index"
                    placement="top"
                    :timestamp="'在'+item.movieSession.startTime+'——'+item.movieSession.endTime+'有一场电影'">
                  <el-card style="--el-card-padding: 0">
                    <el-descriptions size="small" :column="2">

                      <el-descriptions-item label="电影名:">
                        {{ item.movie.movieName }}
                      </el-descriptions-item>
                      <el-descriptions-item label="时长:">
                        {{ item.movie.movieDuration }}分钟
                      </el-descriptions-item>
                    </el-descriptions>
                  </el-card>
                </el-timeline-item>
              </el-timeline>
            </div>
            <div v-if="active==3">
              <span>票价：
              <el-input-number
                  v-model="price"
                  :min="0"
                  size="large"
                  controls-position="right"
              />元/张</span>
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="8">
        <el-card style="--el-card-padding: 10px">
          <el-row>
            <el-col :span="24" v-if="movieInfo">
              <el-descriptions title="场次信息" size="small" :column="1">
                <div v-if="movieInfo">
                  <el-descriptions-item label="封面:">
                    <el-image :src="movieInfo.movieImage" style="height: 100px"></el-image>
                  </el-descriptions-item>
                  <el-descriptions-item label="电影名:">
                    {{ movieInfo.movieName }}
                  </el-descriptions-item>
                  <el-descriptions-item label="时长:">
                    {{ movieInfo.movieDuration }}分钟
                  </el-descriptions-item>
                </div>
                <div v-if="hallInfo">
                  <el-descriptions-item label="影厅:">
                    {{ hallInfo.movieHall.hallName }}
                  </el-descriptions-item>
                  <el-descriptions-item label="座位详情:">
                    <ZzjSeatTable :seat-table="hallInfo.seatTable" :size="8"></ZzjSeatTable>
                  </el-descriptions-item>
                </div>
                <div v-if="startTime">
                  <el-descriptions-item label="起始时间">
                    {{ startTime }}
                  </el-descriptions-item>
                </div>
                <div v-if="endTime">
                  <el-descriptions-item label="结束时间">
                    {{ endTime }}
                  </el-descriptions-item>
                </div>
                <div v-if="price">
                  <el-descriptions-item label="票价">
                    {{ price }}元
                  </el-descriptions-item>
                </div>
              </el-descriptions>
            </el-col>
            <el-col :span="24" v-if="!movieInfo">
              <span><el-empty></el-empty></span>
            </el-col>
          </el-row>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script setup lang="ts">
import {onBeforeMount, ref} from "vue";

import {useRoute} from "vue-router";
import api from "../../../api/api";
import router from "../../../router";
import {ElMessage} from "element-plus";
import ZzjSeatTable from "../../../components/ZzjSeatTable.vue";
import utils from "../../../utils";


const route = useRoute();
const form = ref()
const formRef = ref()
const rules = ref()
const loading = ref(false)
const pageInfo = ref({
  pageSize: 5,
  pageNum: 1,
  total: 0
})
const searchKey = ref('')

const movieId = ref()
const movieInfo = ref()
const movieList = ref()

const hallList = ref()
const hallInfo = ref()
const active = ref(0)

const sessionList = ref()
const startTime = ref()
const endTime = ref()
const isEmpty = ref(true)

const price = ref()

const back = () => {
  active.value--
  pageInfo.value.pageNum=1
  if (active.value == 0) {
    getMovieList()
  } else if (active.value == 1) {

  } else if (active.value == 2) {
  }
}
const next = () => {
  pageInfo.value.pageNum=1
  if (active.value == 0) {
    if (movieId.value != 0) {
      active.value++
      getHallList()
    } else {
      ElMessage.warning("请先选择影片！")
    }
  } else if (active.value == 1) {
    if (hallInfo.value != undefined) {
      active.value++
      getSessionListByHallTime()
    } else {
      ElMessage.warning("请先选择影厅！")
    }
  } else if (active.value == 2) {
    if (startTime.value) {
      if (isEmpty.value) {
        active.value++
      } else {
        ElMessage.error("时间冲突！请重新选择时间段")
      }
    } else {
      ElMessage.warning("请选择时间段")
    }

  } else if (active.value == 3) {
    if (price.value != undefined) {
      active.value++
    } else {
      ElMessage.warning("请设置票价")
    }
  }
}
const goBack = () => {
  router.back()
}
const submit = () => {
  if (movieInfo.value && hallInfo.value && startTime.value && price) {
    api.movieSession.createMovieSession({
      movieId: movieInfo.value.movieId,
      hallId: hallInfo.value.movieHall.hallId,
      startTime: startTime.value,
      endTime: endTime.value,
      sessionPrice: price.value,
      seatTable: hallInfo.value.seatTable
    }).then(res => {
      if (res.data.code == 0) {
        ElMessage.success("添加成功！")
        setTimeout(()=>{
          router.go(0)
        },1000)
      }
    })
  }

}
onBeforeMount(() => {
  movieId.value = route.params.movieId;
  getMovieList()
  getMovie()
  if (movieId.value != 0) {
    active.value = 1
    getHallList()
  }
})
const getMovieList = () => {
  loading.value = true
  api.movie.getMovieList({
    pageSize: pageInfo.value.pageSize,
    pageNum: pageInfo.value.pageNum,
    searchKey: searchKey.value
  }).then(res => {
    if (res.data.code == 0) {
      movieList.value = res.data.data.list
      pageInfo.value.total = res.data.data.count
    }
    loading.value = false
  })
}
const getMovie = () => {
  api.movie.getMovieById({
    movieId: movieId.value
  }).then(res => {
    if (res.data.code == 0) {
      movieInfo.value = res.data.data.movie
    }
  })
}
const handleSizeChange = (val: number) => {
  pageInfo.value.pageSize = val
  getMovieList()
}
const handleCurrentChange = (val: number) => {
  pageInfo.value.pageNum = val
  getMovieList()
}
const selectMovie = (val: any) => {
  if (active.value == 0) {
    movieId.value = val.movieId
    movieInfo.value = val
  } else if (active.value == 1) {
    hallInfo.value = val
  }

}

const getHallList = () => {
  loading.value = true
  api.movieHall.getHallList({
    pageSize: pageInfo.value.pageSize,
    pageNum: pageInfo.value.pageNum,
    searchKey: searchKey.value
  }).then(res => {
    if (res.data.code == 0) {
      hallList.value = res.data.data.list
      pageInfo.value.total = res.data.data.count
    }
    loading.value = false
  })
}

const getSessionListByHallTime = () => {
  loading.value = true
  api.movieSession.getSessionListByHallTime({
    hallId: hallInfo.value.movieHall.hallId,
    startTime: startTime.value,
    endTime: endTime.value
  }).then(res => {
    if (res.data.code == 0) {
      sessionList.value = res.data.data.list
      let count = res.data.data.count
      isEmpty.value = count == 0;
      loading.value = false
    }
  })
}
const setStartTime = () => {
  endTime.value = utils.addMinute(startTime.value, movieInfo.value.movieDuration);
  getSessionListByHallTime()
}
const setEndTime = () => {
  startTime.value = utils.delMinute(endTime.value, movieInfo.value.movieDuration);
  getSessionListByHallTime()
}
</script>

<style scoped>

</style>